<template>
  <div class="study-plan-container">
    <div class="header">
      <div class="back-btn" @click="router.back()">
        <span class="icon">←</span> 返回学生分析
      </div>
      <h1>{{ studentInfo.name }} 的学习计划</h1>
    </div>

    <div class="plan-content">
      <!-- 每周计划 -->
      <div class="weekly-plan">
        <div class="section-header">
          <h2>本周学习计划</h2>
          <el-button type="primary" @click="refreshPlan">
            <el-icon><Refresh /></el-icon>
            重新生成计划
          </el-button>
        </div>
        <div class="plan-cards">
          <div v-for="(plan, index) in weeklyPlans" :key="index" class="plan-card">
            <div class="plan-day">{{ plan.day }}</div>
            <div class="plan-details">
              <div v-for="(item, idx) in plan.items" :key="idx" class="plan-item">
                <span class="time">{{ item.time }}</span>
                <span class="task">{{ item.task }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 学习建议 -->
      <div class="suggestions-section">
        <h2>AI 学习建议</h2>
        <div class="suggestion-cards">
          <div v-for="(suggestion, index) in suggestions" :key="index" class="suggestion-card">
            <div class="suggestion-icon">{{ suggestion.icon }}</div>
            <div class="suggestion-content">
              <h4>{{ suggestion.title }}</h4>
              <p>{{ suggestion.content }}</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 学习目标 -->
      <div class="goals-section">
        <h2>学习目标</h2>
        <div class="goals-grid">
          <div v-for="(goal, index) in goals" :key="index" class="goal-card">
            <div class="goal-header">
              <div class="goal-icon">{{ goal.icon }}</div>
              <h3>{{ goal.title }}</h3>
            </div>
            <div class="goal-progress">
              <el-progress 
                :percentage="goal.progress" 
                :color="goal.color"
                :format="(percentage) => `${percentage}%`"
              />
            </div>
            <p class="goal-description">{{ goal.description }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Refresh } from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()

// 学生信息
const studentInfo = ref({
  name: '张三',
  id: route.params.studentId
})

// 每周计划数据
const weeklyPlans = ref([
  {
    day: '周一',
    items: [
      { time: '08:00-10:00', task: '高等数学重点章节复习' },
      { time: '14:00-16:00', task: '数据结构编程练习' },
      { time: '19:00-21:00', task: '计算机网络知识点巩固' }
    ]
  },
  // ... 其他天的计划
])

// 学习建议
const suggestions = ref([
  {
    icon: '📚',
    title: '知识点巩固',
    content: '建议加强数据结构中树和图的练习，这是你的薄弱环节。'
  },
  // ... 其他建议
])

// 学习目标
const goals = ref([
  {
    icon: '🎯',
    title: '期末成绩目标',
    progress: 75,
    color: '#1890ff',
    description: '目标：班级前10名，当前进度良好，继续保持。'
  },
  {
    icon: '📝',
    title: '作业完成率',
    progress: 92,
    color: '#52c41a',
    description: '保持高质量完成作业，注意整理知识点。'
  },
  {
    icon: '🏃',
    title: '课程参与度',
    progress: 88,
    color: '#722ed1',
    description: '课堂互动和讨论可以更加积极。'
  }
])

// 重新生成计划
const refreshPlan = () => {
  ElMessage.success('学习计划已更新')
}
</script>

<style scoped>
.study-plan-container {
  padding: 30px;
  background: #f0f2f5;
  min-height: 100vh;
}

.header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}

.back-btn {
  padding: 10px 20px;
  background: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.weekly-plan,
.suggestions-section,
.goals-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.plan-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.plan-card {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
}

.plan-day {
  font-size: 18px;
  font-weight: bold;
  color: #1890ff;
  margin-bottom: 12px;
}

.plan-item {
  display: flex;
  margin-bottom: 8px;
  font-size: 14px;
}

.suggestion-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.suggestion-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
}

.goals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.goal-card {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
}

.goal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.goal-icon {
  font-size: 24px;
}

.goal-description {
  margin-top: 12px;
  color: #666;
  font-size: 14px;
}
</style> 